{extend name="layout" /}
{block name="content"}
<!-- Content Header (Page header) -->
<section class="content" style="padding-top:0px;">
<form role="form" action="{:url('setRuleAct')}">
<input type="hidden" name="roleid" value="{$roleid}">
<div class="row">
    <div class="box box-solid">
      <!-- /.box-header -->
      <div class="box-body">
        <div class="box-group" id="ruleid">
          <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
          {volist name="menu" id="v"}
          <div class="panel box box-primary">
            <div class="box-header with-border">
              <h4 class="box-title">
                  <input type="checkbox" class="parentnode-{$v.id}" name="rule[]" value="{$v.id}" parentNode="0" {eq name=":in_array($v.id, $rule)" value="true"} checked {/eq}> {$v.title}
              </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
              <div class="box-body">
                {volist name="v.child" id="vs"}
                <div class="box box-default">
                  <div class="box-header with-border">
                    <h3 class="box-title"><input type="checkbox" class="parentnode-{$vs.id} childnode-{$v.id}" parentNode="{$v.id}" name="rule[]" value="{$vs.id}" {eq name=":in_array($vs.id, $rule)" value="true"} checked {/eq}> {$vs.title}</h3>
                    <!-- /.box-tools -->
                  </div>
                  <!-- /.box-header -->
                  <div class="box-body">
                    <div class="row">
                    {volist name="vs.child" id="vss"}
                    <div class="col-sm-3 col-xs-12" style="margin-left:20px;">
                       <input type="checkbox" name="rule[]" parentNode="{$vs.id}" class="childnode-{$v.id} parentnode-{$vss.id} childnode-{$vs.id}" value="{$vss.id}" {eq name=":in_array($vss.id, $rule)" value="true"} checked {/eq}> {$vss.title}
                    </div>
                    {/volist}
                    </div>
                  </div>
                  <!-- /.box-body -->
                </div>
                {/volist}
              </div>
            </div>
          </div>
          {/volist}
        </div>
      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->
  <!-- /.col -->
  <!-- /.col -->
</div>
</form>
</section>
<!-- /.content -->
{/block}
{block name="script"}
<script type="text/javascript">
  $("input[type='checkbox']").click(function(){
    parentNode = $(this).attr("parentNode");
    id = $(this).val();
    // alert(id);
    if($(this).prop("checked") == true){
      $('.parentnode-'+parentNode).prop("checked",true);
      $('.childnode-'+id).prop("checked",true);
    }
    else{
      $('.childnode-'+id).prop("checked",false);
    }
  });
</script>
{/block}